<template>
  <div class="haruyuki-flex-center haruyuki-flex-direction">
    <div>
      <div class="preview-title">
        <span>基本信息</span>
      </div>
      <div class="preview-content">
        <span>服务商名称：{{ serviceData.baseInfo.serviceName }}</span>
        <span>服务商类型：{{ serviceData.baseInfo.serviceTypeName }}</span>
        <span>联系人：{{ serviceData.baseInfo.contactName }}</span>
        <span>联系电话：{{ serviceData.baseInfo.contactNumber }}</span>
        <span>邮箱：{{ serviceData.baseInfo.email }}</span>
        <span>省份：{{ serviceData.baseInfo.provinceName }}</span>
        <span>地市：{{ serviceData.baseInfo.cityName }}</span>
        <span>区县：{{ serviceData.baseInfo.areaName }}</span>
        <span>联系地址：{{ serviceData.baseInfo.address }}</span>
        <span>合作状态：{{ serviceData.baseInfo.isCooperateName }}</span>
        <span>分润状态：{{ serviceData.baseInfo.profitStateName }}</span>
        <span>合同状态：{{ serviceData.baseInfo.cooperateStateName }}</span>
        <span>异常状态原因：{{ serviceData.baseInfo.exceptionMsg }}</span>
      </div>
    </div>
    <div>
      <div class="preview-title">
        <span>实名信息</span>
      </div>
      <div class="preview-content">
        <div class="dg-preview" v-if="serviceData.baseInfo.serviceType != '0'">
          <span>营业执照名称：{{ serviceData.authInfo.compName }}</span>
          <span>营业执照编号：{{ serviceData.authInfo.roaLicenseNo }}</span>
          <span>营业执照开始日期：{{ getYearMonth(serviceData.authInfo.roaLicenseStartTime) }}</span>
          <span>营业执照截止日期：{{ getYearMonth(serviceData.authInfo.roaLicenseTime) }}</span>

          <span class="w100">营业执照注册地址：{{ serviceData.authInfo.businessAddress }}</span>
          <span class="w100">
            <div class="haruyuki-image-preview">
              <div class="haruyuki-image">
                  <el-image
                  style="width: 100%; height: 100%"
                  :src="serviceData.authInfo.roaLicenseImageUrl"
                  z-index="5000"
                  :preview-src-list="[serviceData.authInfo.roaLicenseImageUrl]"
                  fit="contain"
                  >
                  </el-image>
                  <div class="haruyuki-text">营业执照照片</div>
              </div>
            </div>
          </span>
        </div>
        
        <span>法人名称：{{ serviceData.authInfo.roaName }}</span>
        <span>身份证号：{{ serviceData.authInfo.roaCardNo }}</span>
        <span>法人身份证开始日期：{{ getYearMonth(serviceData.authInfo.roaCardStartTime) }}</span>
        <span>法人身份证截至日期：{{ getYearMonth(serviceData.authInfo.roaCardTime) }}</span>
        <span class="w100" v-if="serviceData.baseInfo.serviceType == '0'">
          <div class="haruyuki-image-preview">
            <div class="haruyuki-image">
                <el-image
                style="width: 100%; height: 100%"
                :src="serviceData.authInfo.roaCardHeldUrl"
                z-index="5000"
                :preview-src-list="[serviceData.authInfo.roaCardHeldUrl]"
                fit="contain"
                >
                </el-image>
                <div class="haruyuki-text">法人身份证人像面照片</div>
            </div>
          </div>
        </span>
        <span >
          <div class="haruyuki-image-preview">
            <div class="haruyuki-image">
                <el-image
                style="width: 100%; height: 100%"
                :src="serviceData.authInfo.roaCardPositiveUrl"
                z-index="5000"
                :preview-src-list="[serviceData.authInfo.roaCardPositiveUrl]"
                fit="contain"
                >
                </el-image>
                <div class="haruyuki-text">法人身份证人像面照片</div>
            </div>
          </div>
        </span>
        <span >
          <div class="haruyuki-image-preview">
            <div class="haruyuki-image">
                <el-image
                style="width: 100%; height: 100%"
                :src="serviceData.authInfo.roaCardBackUrl"
                z-index="5000"
                :preview-src-list="[serviceData.authInfo.roaCardBackUrl]"
                fit="contain"
                >
                </el-image>
                <div class="haruyuki-text">法人身份证国徽面照片</div>
            </div>
          </div>
        </span>
      </div>
    </div>
    <div class="w100">
      <div class="preview-title">
        <span>结算卡信息</span>
      </div>
      <div class="preview-content w100">
        <span class="w100" v-if="serviceData.baseInfo.serviceType != '0'">
          <div class="haruyuki-image-preview">
            <div class="haruyuki-image">
                <el-image
                style="width: 100%; height: 100%"
                :src="serviceData.bankInfo.robCardPublicImgUrl"
                z-index="5000"
                :preview-src-list="[serviceData.bankInfo.robCardPublicImgUrl]"
                fit="contain"
                >
                </el-image>
                <div class="haruyuki-text">对公开户证明照片</div>
            </div>
          </div>
        </span>
        <span  v-if="serviceData.baseInfo.serviceType == '0'">
          <div class="haruyuki-image-preview">
            <div class="haruyuki-image">
                <el-image
                style="width: 100%; height: 100%"
                :src="serviceData.bankInfo.robBankPositiveUrl"
                z-index="5000"
                :preview-src-list="[serviceData.bankInfo.robBankPositiveUrl]"
                fit="contain"
                >   
                </el-image>
                <div class="haruyuki-text">结算卡正面照片</div>
            </div>
          </div>
        </span>
        <span  v-if="serviceData.baseInfo.serviceType == '0'">
          <div class="haruyuki-image-preview">
            <div class="haruyuki-image">
                <el-image
                style="width: 100%; height: 100%"
                :src="serviceData.bankInfo.robBankBackUrl"
                z-index="5000"
                :preview-src-list="[serviceData.bankInfo.robBankBackUrl]"
                fit="contain"
                >
                </el-image>
                <div class="haruyuki-text">结算卡反面照片</div>
            </div>
          </div>
        </span>
        <span>开户行名称：{{ serviceData.bankInfo.robBank }}</span>
        <span>开户支行名称：{{ serviceData.bankInfo.robBankBranch }}</span>
        <!-- <span>账户名称：{{ serviceData.bankInfo.robBankName }}</span> -->
        <span>银行账号：{{ serviceData.bankInfo.robBankNo }}</span>
        <span v-if="serviceData.baseInfo.serviceType==0">银行预留手机号：{{ serviceData.bankInfo.bankMobile }}</span>
        <span class="w100">开户行所在地址：{{ serviceData.bankInfo.provinceName }}/{{serviceData.bankInfo.cityName}}/{{ serviceData.bankInfo.areaName }}</span>
      </div>
    </div>
    <div class="w100">
      <div class="preview-title">
        <span>分配通道</span>
      </div>
      <!-- <div class="preview-content">
        <span v-for="(item, index) in serviceData.aisleInfos" :key="index">通道名称{{index+1}}：{{ item.aisleName }}</span>
      </div> -->
      <div class="preview-content-dev">
          <!-- <el-button disabled v-for="(item, index) in serviceData.aisleInfos" :key="index">{{item.aisleName}}</el-button> -->
          <span class="dg-mr-10" v-for="(item, index) in serviceData.aisleInfos" :key="index">{{item.aisleName}}</span>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    serviceData: Object
  },
  data() {
    return {
    };
  },
  computed:{
    getYearMonth(){
      return (date) => {
        let result = (date + '').split(' ');
        return result[0];
      }
    }
  },
  created() {
  },
  methods: {
  },
};
</script>

<style lang="scss" scoped>
.preview-title {
  padding: 20px 0;
  text-align: center;
  span {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
  }
}
// .preview-content {
//   // width: 400px;
//   width: 100%;
//   padding: 0 20px;
//   span {
//     display: block;
//     margin: 8px 0;
//   }
// }
.preview-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  // width: 400px;
  padding: 0 20px;
  span {
    // display: block;
    width: 50%;
    margin: 8px 0;
  }
  .dg-preview{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    span {
      // display: block;
      width: 50%;
      margin: 8px 0;
    }
  }

}
.preview-content-dev{
  padding-top: 20px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  .dg-mr-10{
    margin:0 10px;
    color: #409EFF;
  }
}

.haruyuki-image-preview{
  width: 280px;
}
.w100{
  width: 100% !important;
}
</style>